<template>
  <el-dialog title="场内轨迹详情" :visible.sync="dialogVisible" width="70%" :close-on-click-modal="false" :before-close="handleClose">
    <el-card class="box-card">
      <div>
        <ul v-if="!carFlag" class="oneUl">
          <li>
            <span>员工姓名:</span>
            <span>{{ recordData.name }}</span>
          </li>
          <li>
            <span>RFID:</span>
            <span>{{ recordData.rfid }}</span>
          </li>
          <li>
            <span>门禁ID:</span>
            <span>{{ recordData.accessCardID }}</span>
          </li>
        </ul>
        <ul v-else class="oneUl">
          <li>
            <span>车辆类型:</span>
            <span>{{ recordData.carType }}</span>
          </li>
          <li>
            <span>车辆RFID:</span>
            <span>{{ recordData.rfid }}</span>
          </li>
          <li>
            <span>车牌号:</span>
            <span>{{ recordData.plateNumber }}</span>
          </li>
        </ul>
        <ul v-if="!carFlag" class="twoUl">
          <li>
            <span>部门:</span>
            <span>{{ recordData.department }}</span>
          </li>
          <li>
            <span>职务:</span>
            <span>{{ recordData.job }}</span>
          </li>
          <li>
            <span>工种:</span>
            <span>{{ recordData.work }}</span>
          </li>
        </ul>
        <ul v-else class="twoUl">
          <li>
            <span>负责人:</span>
            <span>{{ recordData.responsibleMan }}</span>
          </li>
          <li>
            <span>负责人联系方式:</span>
            <span>{{ recordData.responsiblePhone }}</span>
          </li>
          <li></li>
        </ul>
      </div>
    </el-card>
    <ListTable ref="RefTableList" :page="false" :loading="tableLoading" :table-data="tableData" :table-col="tableCol"></ListTable>
    <div class="list-table-pager">
      <el-pagination
        background
        style="text-align: center;"
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagerData.pageIndex"
        :total="pagerData.count"
        :page-size="pagerData.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      ></el-pagination>
    </div>
  </el-dialog>
</template>

<script>
  import dialogEditMixin from '@/mixins/dialogEdit'
  import { eleValidator } from '@/utils/tools'
  import listMixin from '@/mixins/list'
  import { parseTime } from '@/utils'
  export default {
    mixins: [dialogEditMixin, listMixin],
    data() {
      return {
        carFlag: false,
        tableLoading: false,
        // 人员信息
        recordData: {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        },
        tableData: [],
        tableCol: [
          {
            label: '所在区域',
            formatter(row, col, cell) {
              if (row.baseStation) {
                return row.baseStation.area.name
              } else if (row.autoGate) {
                return row.autoGate.area.name
              }
            }
          },
          {
            label: '设备名称',
            formatter(row, col, cell) {
              if (row.baseStation) {
                return row.baseStation.name
              } else if (row.autoGate) {
                return row.autoGate.name
              }
            }
          },
          {
            prop: 'enterTime',
            label: '进入时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.enterTime).getTime())
            }
          },
          {
            prop: 'leaveTime',
            label: '离开时间',
            formatter(row, col, cell) {
              return parseTime(new Date(row.leaveTime).getTime())
            }
          }
        ]
      }
    },
    methods: {
      // 编辑数据处理
      responseDataHandleProgram(newValue) {
        this.recordData={}
        if (!newValue.data) {
          return
        }
        // 人员信息
        const {
          data: { items: resData, count, pageIndex }
        } = newValue
        console.log(count)
        if (resData.length > 0) {
          if (resData[0].employeeId) {
            this.carFlag = false
            let people = resData[0].employee
            this.recordData = {
              name: people.name,
              rfid: people.rfid,
              accessCardID: people.accessCardID,
              department: people.department ? people.department.deptName : '',
              job: people.job ? people.job.jobTitle : '',
              work: people.work ? people.work.workName : ''
            }
            this.tableData = resData.map(item => {
              item.loadingEdit = false
              item.loadingDel = false
              return item
            })
            this.$nextTick(() => {
              this.pagerData.count = count
              this.$refs.RefTableList.update({ page: pageIndex, count })
              this.tableLoading = false
            })
          } else {
            this.carFlag = true
            let car = resData[0].car
            this.recordData = {
              carType: car.carType,
              rfid: car.rfid,
              plateNumber: car.plateNumber,

              responsibleMan: car.responsibleMan,
              responsiblePhone: car.responsiblePhone
            }
            this.tableData = resData.map(item => {
              item.loadingEdit = false
              item.loadingDel = false
              return item
            })
            this.$nextTick(() => {
              this.pagerData.count = count
              this.$refs.RefTableList.update({ page: pageIndex, count })
              this.tableLoading = false
            })
          }
        }
      },
      pageChange(pageIndex) {
        this.pagerData.pageIndex = pageIndex
        this.getSearch(true, false)
      },
      pageSizeChange(pageSize) {
        this.pagerData.pageSize = pageSize
        this.getSearch(true, false)
      },
      resetFormData() {
        this.recordData = {
          name: '',
          RFID: '',
          accessCardID: '',
          department: '',
          job: '',
          work: ''
        }
      },
      handleClose() {
        this.tableData = []
        this.close()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .oneUl,
  .twoUl {
    margin: 0;
    padding: 0;
    display: flex;
    li {
      flex: 1;
      list-style: none;
    }
  }
  .twoUl {
    margin-top: 10px;
  }
  .list-table-pager {
    margin-bottom: 20px;
    ::v-deep.active {
      background-color: #254c99 !important;
      color: #fff;
    }

    .el-pagination {
      ::v-deep .el-pagination__sizes {
        .el-input.is-focus {
          .el-input__inner {
            border-color: #254c99;
          }
          .el-input__inner:hover {
            border-color: #254c99;
          }
        }
        .el-input {
          .el-input__inner:hover {
            border-color: #254c99;
          }
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
      ::v-deep .el-pagination__jump {
        .el-input {
          .el-input__inner:focus {
            border-color: #254c99;
          }
        }
      }
    }
  }
</style>
